import React, {Component} from 'react';
import './App.css';
import Utils from "./Utils";
import _ from "lodash";
import {Throttle} from 'react-throttle';

const utils = new Utils();

class DeBounce extends Component {

  constructor(p) {
    super(p);
    this.state = {
      num: 1
    };
    this.onChange = this.onChange.bind(this);
    this.onChange=_.debounce(this.onChange,500);
    this.resizeListener = this.resizeListener.bind(this);
    this.resizeListener=_.throttle(this.resizeListener,200);
  }

  onChange() {
    console.log(`调用接口检测用户名是否存在:${this.input.value}`);
  }

  componentDidMount() {
    window.addEventListener('resize', this.resizeListener);
  }

  resizeListener() {
    console.log(window.innerWidth);
    this.setState({
      width: window.innerWidth
    });
  }

  render() {
    return (
        <>
          <div className='App'>
            <input
                ref={e => this.input = e}
                onChange={this.onChange}
                placeholder={'请输入用户名'}
                style={{display: 'block', width: this.state.width / 2}}
            />
          </div>
        </>
    );
  }

}

export default DeBounce;
